<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-manage">
          <svg-icon icon-class="user" />
          <div> 管理员用户</div>
          <span> {{ renderlist.admin_num }} 名</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-regist">
          <svg-icon icon-class="peoples" />
          <div>平台注册用户</div>
          <span> {{ sexlist.total }} </span>名
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-article">
          <svg-icon icon-class="edit" />
          <div>平台文章总数</div>
          <span> {{ renderlist.article_num }} </span>篇
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-adv">
          <svg-icon icon-class="documentation" />
          <div>广告位{{ renderlist.advimg_num }}个 </div>
          <div>广告图{{ renderlist.advpos_num }}个 </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card" style="height: 400px">
          <div slot="header" class="clearfix">
            <span>最新注册新用户</span>
          </div>
          <div v-for="item in userlist" :key="item.id" class="text item">
            <span>{{ item.username }}</span>
            <span> {{ item.sex===0?'男':'女' }}</span>
            <span> {{ item.address }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" style="height: 400px">
          <div slot="header" class="clearfix">
            <span>点赞文章排行</span>
          </div>
          <div v-for="item in articlelist" :key="item.id" class="text item">
            {{ item.title }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户性别分析</span>
          </div>
          <div ref="piebox" class="chart-box" style="height: 300px" />
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div ref="barbox" class="grid-content bg-echarts" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getdashboard } from '@/api/dashboard'
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      renderlist: [],
      articlelist: [],
      sexlist: [],
      userlist: [],
      allcate: []
    }
  },
  watch: {
    userlist() {
      this.myChartpie.setOption(
        {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: this.sexlist.user_woman, name: '女性' },
                {
                  value: this.sexlist.user_man,
                  name: '男性'
                }
              ]
            }
          ]
        }
      )
    },
    allcate() {
      this.myChartbar.setOption(
        {
          title: {
            text: '各分类文章发布数量',
            textAlign: 'center',
            left: '50%',
            textStyle: {
              color: '#5470c6'
            }
          },
          xAxis: {
            type: 'category',
            data: this.allcate.map(item => item.catename)
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.allcate.map(item => item.num),
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        }
      )
    }
  },
  async created() {
    const res = await getdashboard()
    console.log(res)
    this.renderlist = res
    this.articlelist = res.hot_article
    this.userlist = res.new_user
    this.sexlist = res.user
    this.allcate = res.all_cate
  },
  mounted() {
    this.myChartpie = echarts.init(this.$refs.piebox)
    this.myChartbar = echarts.init(this.$refs.barbox)
  }
}
</script>

<style lang="scss" scoped>
svg{
  position: absolute;
  top: 20px;
  left: 45px;
  font-size: 40px;
}
.item{
  border-bottom: 1px dashed #000;
  white-space: nowrap; // 文字强制不换行
  text-overflow: ellipsis; // 文字溢出换省略号
  overflow: hidden; // 溢出文字隐藏
  padding: 10px 0;
  span{
    display: inline-block;
    width: 110px;
    font-size: 14px;
    overflow: hidden;
  }
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
::v-deep .el-card__header {
  background-color: #dddddd;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-echarts {
  height: 400px !important;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  color: #fff;
  border-radius: 4px;
  min-height: 36px;
  height: 100px;
  text-align: center;
position: relative;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.bg-manage {
  background-color: #fb6d49;
  padding: 25px;
}
.bg-regist {
  background-color: #67c23a;
  padding: 25px;
}
.bg-article {
  background-color: #e6a23c;
  padding: 25px;
}
.bg-adv {
  background-color: #3a7ce7;
  padding: 25px;
}
</style>
